<template>
  <!--查看明细-->
	<div id="app" class="backf4">
		  <div class="my-looklist" style="padding-top: .3rem;">
          <!--<h3 class="withdraw-title" v-text="typeText">余额明细</h3>-->
          <div class="change-time">
              <div class="begin-time">
                  <div class="item1">开始时间</div>
                  <div class="item2" @click="openPicker(1)">
                      <span v-text="startTime">2018 - 04 - 16</span>
                  </div>
              </div>
              <div class="end-time">
                  <div class="item1">结束时间</div>
                  <div class="item2" @click="openPicker(2)">
                      <span v-text="endTime">2018 - 05 - 16</span>
                  </div>
              </div>
          </div>
          <!--周月等-->
          <div class="change-weak">
              <div class="end-time" v-for="(item,index) in month">
                  <div class="item1" v-text="item.time"></div>
                  <div class="item2" @click="selectMont(index,item.startTime,item.startTimeX)">
                      <span class="check-icon" :class="{'on':startTime == item.startTime && endTime == item.endTime}"></span>
                  </div>
              </div>              
          </div>
          <div class="my-btn" @click="goList">立即查询</div>
          <!--时间选择-->          
                <mt-datetime-picker
                  ref="picker"
                  v-model="pickerVisible"
                  type="date"
                  year-format="{value}"
                  month-format="{value}"
                  date-format="{value}"
                  confirmText="完成"
                  titleText="请选择时间"
                  style="height: 4.69rem;"
                   @confirm="handleConfirm">
                </mt-datetime-picker>
      </div>
	</div>
</template>
<script>
    import 'assets/css/common.css'
    import './index.css'
    import common from 'assets/js/common'
    import { DatetimePicker } from 'mint-ui'
    import moment from 'moment'// 格式化时间

export default {
  data() {
    return {
      pickerVisible:'',
      month:[{time:'一周内'},{time:'一个月内'},{time:'三个月内'}],
      startTime:'2018 - 01 - 01',  //显示的开始时间
      endTime:'2018 - 05 - 01',  //显示的结束时间
      startTimeX:"",  //开始时间戳
      endTimeX:"",  //结束时间戳
      type:'',
      monthTime:'',
      selectedMonth:0,
      moneytype:2, //账户类型
      typeText:''
    }
  },
  //实例初始化最之前，无法获取到data里的数据
  beforeCreate(){
  	
  	
  },  
  //在挂载开始之前被调用
  beforeMount(){
  	
  
  }, 
  components:{DatetimePicker},
  //已成功挂载，相当ready()
  mounted(){
      //默认选中一周内
      this.moneytype = parseInt(common.getQueryString('moneytype'));
      if(this.moneytype == 1){
          this.typeText = '余额明细';
      }
      if(this.moneytype == 2){
          this.typeText = '钻石明细';
      }
      if(this.moneytype == 3){
          this.typeText = '魅力值明细';
      }
       
      //默认一周内
      this.startTime = moment().subtract('days', 6).format('YYYY - MM - DD');
      this.startTimeX = moment().subtract('days', 6).format('X');
      this.endTime = moment(new Date()).format('YYYY - MM - DD');
      this.endTimeX = moment(new Date()).format('X');
      this.selectedMonth = 0;
      this.getFormday();
      
      this.addTitle();
  },
  //相关操作事件
  methods: {
    //加选择时间
    addTitle(){
        var html = "<span class='mint-datetime-action mint-datetime-title'>请选择时间</span"
        $('.picker-toolbar .mint-datetime-cancel').after(html);
    },
    //查询
    goList:function(){
        window.location.href = '/views/looklist/index.html?moneytype='+this.moneytype+'&startTime='+this.startTimeX+'&endTime='+this.endTimeX+'&h5=true';
    },
    //选择周月
    selectMont:function(index,time,timeX){
        this.selectedMonth = index;
        this.startTime = time;
        this.startTimeX = timeX;
    },
    //拼周期时间
    getFormday(){         
         for(var i=0;i<this.month.length;i++){
              if(i == 0){
                 this.month[0].startTimeX = moment().subtract('days', 6).format('X');
                 this.month[0].startTime = moment().subtract('days', 6).format('YYYY - MM - DD');
              }
              if(i == 1){
                 this.month[1].startTimeX = moment().subtract('month', 1).format('X');
                 this.month[1].startTime = moment().subtract('month', 1).format('YYYY - MM - DD');
              }
              if(i == 2){
                 this.month[2].startTimeX = moment().subtract('month', 3).format('X');
                 this.month[2].startTime = moment().subtract('month', 3).format('YYYY - MM - DD');
              }
              this.month[i].endTimeX = moment(new Date()).format('X');
              this.month[i].endTime = moment(new Date()).format('YYYY - MM - DD');
         }
         console.log(this.month);
    },
    //打开时间选择
    openPicker (type) {
        this.$refs.picker.open();
        this.type = type;
    },
    //选择时间完成
    handleConfirm:function(e){
        var date = moment(e).format('YYYY - MM - DD');
        if(this.type == 1){
            this.startTime = date;
        }
        if(this.type == 2){
             this.endTime = date;
        }
        
    },
    //列表接口
    getList(){
        common.ajax({
            type:'GET',
            url:'/api/user/usergoldhistory?currency=2&endTime='+this.endTimeX+'&startTime='+this.startTimeX+'&status=0&h5=true'
        }).then(res=>{
            console.log(res.data)
        })
    }
  }
}
</script>
<style>
    .picker-toolbar{
      text-align: center;
    }
    .picker-item.picker-selected{
      background-color: #f4f4f4;
    }
    .mint-datetime .picker-item{
      font-size: .36rem;
    }
    .my-looklist .picker-toolbar{
      background-color: #f4f4f4;
    }
    .my-looklist .mint-datetime-cancel{
        width: 1.2rem;
        padding-left: .3rem;
        font-size: .36rem;
        color: #bbb;
        text-align: left;
    }
    .my-looklist .mint-datetime-confirm{
        width: 1.2rem;
        padding-right: .3rem;
        font-size: .36rem;
        color: #000;
        text-align: right;
    }
    .my-looklist .mint-datetime-title{
        width: 3rem;
        font-size: .36rem;
        color: #000;
        text-align: center;
    }
    
</style>

